<template>
	<view class="box">
		<uni-card :is-shadow="false" :border="false" :margin="0" :padding="0">
			<uni-list :border="false">
				<uni-list-item v-for="item in hotelList" :key="item.id">
					<template v-slot:header>
						<view class="slot-box">
							<image class="slot-image" :src="item.logo"></image>
						</view>
					</template>
					<template v-slot:body>
						<view class="slot-box">
							<text class="slot-text">{{item.hotel_name}}</text>
						</view>
					</template>
				</uni-list-item>
			</uni-list>
		</uni-card>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				hotelList: [],
				total: 0,
				limit: 15,
				page: 1,
				// 是否正在请求数据
				isloading: false
			}
		},
		onShow() {
			this.getHotelList()
		},
		// 下拉刷新的事件
		onPullDownRefresh() {
			// 1. 重置关键数据
			this.page = 1
			this.isloading = false
			this.hotelList = []
			this.total = 0
				setTimeout(() => {
					uni.showToast({
						title: "刷新成功",
						icon: "none",
					})
				}, 300);
				// 2. 重新发起请求
				this.getHotelList()
				uni.stopPullDownRefresh()
		},
		// 触底的事件
		onReachBottom() {
			// 判断是否还有下一页数据
			if (this.page * this.limit >= this.total) return uni.showToast({
				title: "数据加载完毕！",
				icon: 'none'
			})
			// 判断是否正在请求其它数据，如果是，则不发起额外的请求
			if (this.isloading) return
			// 让页码值自增 +1
			this.page += 1
			// 重新获取列表数据
			this.getHotelList()
		},
		methods: {
			getHotelList() {
				const params = {
					cate: 2,
					page: this.page,
					limit: this.limit
				}
				uni.showLoading({
					title: "加载中...",
					mask: true
				})
				// ** 打开节流阀
				this.isloading = true
				this.$http.get('/index/Hotelindex/hotel_list', params).then(res => {
					uni.hideLoading()
					// ** 关闭节流阀
					this.isloading = false
					this.total = res.total
					this.hotelList = [...this.hotelList, ...res.data]
				}).catch(res => {
					uni.hideLoading()
					uni.showToast({
						title: res.errMsg,
						icon: "none"
					})
				})
			},
		}
	}
</script>

<style lang="scss">
	.box {
		padding: 18rpx;
		height: 100vh;
		// overflow: auto;
	}

	.slot-image {
		display: block;
		margin-right: 10px;
		width: 40px;
		height: 40px;
		border-radius: 15rpx;
	}

	.slot-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
	}

	.slot-text {
		flex: 1;
		font-size: 14px;
		color: #000;
		margin-right: 20px;
	}
</style>
